<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新闻中心</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        #container {
            width: 1300px;
            margin: 0 auto;
        }

        .header {
            background-color: #191D3A;
            margin-bottom: 30px;
        }

        .navs {
            height: 58px;
            display: flex;
            align-items: center;
        }

        .navs a {
            width: 85px;
            color: #818496;
            text-decoration: none;
            text-align: center;
            line-height: 58px;
            border-left: 1px solid #252947;
            border-right: 1px solid #252947;
        }

        /* 新闻列表样式 */
        .news-list {
            padding: 30px;
            background: white;
        }

        .news-item {
            padding: 20px 0;
            border-bottom: 1px solid #eee;
        }

        .news-title {
            font-size: 18px;
            color: #333;
            margin-bottom: 8px;
        }

        .news-date {
            color: #999;
            font-size: 14px;
        }

        #img {
          height: auto;
          width: auto;
          display: block;
          margin: 0 auto;
        }
        body {
      font-family: 'Roboto', sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f4f4f9;
      color: #333;
    }
    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
    }
    header {
      background: linear-gradient(135deg, #6a11cb, #2575fc);
      color: white;
      padding: 60px 20px;
      text-align: center;
      border-radius: 10px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    }
    header h1 {
      font-size: 3rem;
      margin: 0;
      animation: fadeIn 2s ease-in-out;
    }
    header p {
      font-size: 1.2rem;
      margin: 10px 0 0;
      animation: fadeIn 2.5s ease-in-out;
    }
    .section {
      background: white;
      margin: 20px 0;
      padding: 30px;
      border-radius: 10px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s ease;
    }
    .section:hover {
      transform: translateY(-5px);
    }
    .section h2 {
      font-size: 2rem;
      color: #2575fc;
      margin-bottom: 20px;
    }
    .section p {
      font-size: 1rem;
      line-height: 1.6;
    }
    .skills {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }
    .skills span {
      background: #e0e7ff;
      color: #2575fc;
      padding: 8px 15px;
      border-radius: 20px;
      font-size: 0.9rem;
    }
    .projects {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 20px;
    }
    .project {
      background: #f9f9f9;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s ease;
    }
    .project:hover {
      transform: translateY(-5px);
    }
    .project h3 {
      font-size: 1.2rem;
      color: #2575fc;
      margin-bottom: 10px;
    }
    .project p {
      font-size: 0.9rem;
      color: #666;
    }
    footer {
      text-align: center;
      padding: 20px;
      background: #333;
      color: white;
      margin-top: 40px;
      border-radius: 10px;
    }
    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    </style>
</head>
<body>
    <div id="container">
        <!-- 导航栏（与首页一致） -->
        <div class="header">
            <div class="navs">
                <!-- 修改 href 属性值 -->
                <a href="news.html" style="color: #fff;">首页</a>
                <a href="news.html" >新闻中心</a>
                <a href="introduce.html">关于我们</a>
                <a href="reg.html">注册/登录</a>
            </div>
        </div>

        <div>
            <!-- 插入图片，需将图片路径替换为实际图片路径 -->
            <img src="image.png" alt="新闻配图" id="img">
        </div>
        <div class="container">
            <header>
              <h1>小樊</h1>
              <p>全栈开发工程师 | 技术爱好者 | 创新者</p>
              <p>中北大学</p>
            </header>
        
            <section class="section">
              <h2>关于我</h2>
              <p>我是一名经验丰富的全栈开发工程师，专注于构建高效、可扩展的Web应用。我热爱技术，喜欢探索新工具和框架，致力于通过代码解决实际问题。</p>
            </section>
        
            <section class="section">
              <h2>技能</h2>
              <div class="skills">
                <span>JavaScript</span>
                <span>React</span>
                <span>Node.js</span>
                <span>Python</span>
                <span>Django</span>
                <span>SQL</span>
                <span>Git</span>
                <span>Docker</span>
                <span>AWS</span>
              </div>
            </section>
        
            <section class="section">
              <h2>项目经验</h2>
              <div class="projects">
                <div class="project">
                  <h3>在线教育平台</h3>
                  <p>使用React和Node.js开发的全栈应用，支持课程管理、在线学习和支付功能。</p>
                </div>
                <div class="project">
                  <h3>智能家居控制系统</h3>
                  <p>基于Python和物联网技术，实现远程控制家电和能源管理。</p>
                </div>
                <div class="project">
                  <h3>电商平台</h3>
                  <p class="project-time">2024 - 2025</p>
                  <p>使用Django和Vue.js构建的电商平台，支持商品管理、购物车和订单处理。该平台具有响应式设计，能够在各种设备上完美显示。</p>
                  <p class="project-role">担任全栈开发工程师，负责前后端的开发和部署。</p>
                </div>
              </div>
            </section>
        
            <section class="section">
              <h2>教育背景</h2>
              <div class="education">
                <div class="education-item">
                  <h3>清华大学 - 计算机科学与技术 - 学士学位</h3>
                  <p class="education-time">2018 - 2022</p>
                  <p>在清华大学的学习期间，我深入学习了计算机科学的基础知识，包括数据结构、算法设计、操作系统等。</p>
                </div>
                <div class="education-item">
                  <h3>斯坦福大学 - 软件工程 - 硕士学位</h3>
                  <p class="education-time">2022 - 2024</p>
                  <p>在斯坦福大学，我专注于软件工程的研究，学习了软件设计模式、软件测试和质量保证等课程。</p>
                </div>
              </div>
            </section>
        
            <section class="section">
              <h2>联系方式</h2>
              <p>邮箱：test@example.com</p>
              <p>电话：123-456-7890</p>
              <p>社交媒体：<a href="#">LinkedIn</a> | <a href="#">GitHub</a></p>
            </section>
        
            <style>
              .project-time {
                font-size: 0.9rem;
                color: #999;
                margin-bottom: 5px;
              }
              .project-role {
                font-size: 0.9rem;
                color: #666;
                margin-top: 10px;
              }
              .education {
                display: flex;
                flex-direction: column;
                gap: 20px;
              }
              .education-item h3 {
                font-size: 1.2rem;
                color: #2575fc;
                margin-bottom: 5px;
              }
              .education-time {
                font-size: 0.9rem;
                color: #999;
                margin-bottom: 10px;
              }
            </style>
        
            <footer>
              <p>版权所有 &copy; 2025 小樊</p>
            </footer>
          </div>
        
    </div>
</body>
</html>